<template>
  <div class="map-com">
    <button class="return-btn" @click="mapInt">返回</button>
    <div :id="id" class="o-echarts"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts'

export default {
  name: 'echart-map',
  data() {
    return {
      id: 'echarts_' + new Date().getTime() + Math.floor(Math.random() * 1000),
      echartObj: null,
      JsonData: [],
      option: {
        // 提示框设置
        tooltip: {
          padding: 0,
          backgroundColor: '#2c3e5060',
          borderColor: 'transparent',
          textStyle: {
            color: '#fff',
            fontSize: 12,
          },
          // 字符模板
          formatter: (params) => {
            // params.data
            return `
              <div class='tooltip-box'>
                <p>雇员人数</p>
              <p>${params.name}:${params.value}</p>
              </div>
                  `
          },
        },
        // 映射区域设置，主要用于映射区域块的颜色
        visualMap: {
          type: 'continuous',
          min: 0,
          max: 100,
          opacity: [1, 0.4],
          range: null,
          show: false,
          inRange: {
            color: ['#4bb3d3', '#3ba4be', '#286a9c'], // 颜色根据min和max区间变化
          },
        },
        geo: {
          map: 'mifeng',
          label: {
            show: true,
            color: '#fff',
            // houver时颜色
            emphasis: {
              show: true,
              color: '#fff',
            },
          },
          roam: false, // 缩放
          itemStyle: {
            // normal: {
            //   areaColor: '#1d99c0', // 区域颜色
            //   borderColor: '#15bad7', //  边框颜色
            //   borderWidth: 1,
            // },
            emphasis: {
              areaColor: '#4f7fff', // hover效果颜色
            },
          },
          left: '2%',
          right: '2%',
          top: '2%',
          bottom: '2%',
        },
      },
    }
  },
  mounted() {
    this.echartObj = echarts.init(document.getElementById(this.id))
    this.mapInt()
    // 监听视窗变化
    window.addEventListener('resize', () => {
      if (this.echartObj && this.echartObj.resize) {
        this.echartObj.resize()
      }
    })

    // 地图点击事件，点击区域时
    this.echartObj.on('click', (params) => {
      // 根据传递过来的dataIndex来获取当前地区code
      const adcode = this.JsonData.features[params.dataIndex].properties.adcode
      const adType = this.JsonData.features[params.dataIndex].properties.level
      // 只显示到省级数据
      if (adType === 'province') {
        // 获取该省城市数据
        this.$axios({
          method: 'get',
          url: `https://geo.datav.aliyun.com/areas_v3/bound/geojson?code=${adcode}_full`,
          data: null,
          headers: { 'Content-Type': 'multipart/form-data' },
        }).then((res) => {
          // 根据params传递的值选取区域数据
          this.JsonData = res.data
          echarts.registerMap('mifeng', this.JsonData)
          this.echartObj.clear()
          // 重绘地图
          this.echartObj.setOption(this.getOptions(adcode), true)
        })
      }
    })
  },
  methods: {
    // 地图初始化
    mapInt() {
      // 获取地图数据，这里需要筛选出没有名字的省份（PS，数据里没有名字的是海南省下方群岛边界，不去除tooltip会报错）
      this.$axios({
        method: 'get',
        url: 'https://geo.datav.aliyun.com/areas_v3/bound/geojson?code=100000_full',
        data: null,
        headers: { 'Content-Type': 'multipart/form-data' },
      }).then((res) => {
        this.JsonData = res.data
        this.JsonData.features = this.JsonData.features.filter((item) => {
          return item.properties.name
        })
        echarts.registerMap('mifeng', this.JsonData)
        this.echartObj.setOption(this.getOptions(100000), true)
      })
    },

    // 设置tooltip数据
    getOptions(adcode) {
      this.setOptions('series', [
        {
          name: 'mifeng',
          type: 'map',
          geoIndex: 0, // 不可缺少，否则无tooltip 指示效果
          data: this.getSeriesDataOption(adcode),
        },
      ])
      return this.option
    },
    // 获取对应省份/城市的数据
    getSeriesDataOption(adcode) {
      console.log(adcode)
      var arr = []
      this.JsonData.features.map((item) => {
        // 匹配toolTip数据
        if (item.properties.name) {
          arr.push({
            name: item.properties.name,
            value: Math.ceil(Math.random() * 500),
          })
        }
      })
      return arr
    },

    // option处理
    setOptions(objKey, objVal) {
      if (this.option[objKey] && typeof this.option[objKey] === 'object' && !Array.isArray(this.option[objKey])) {
        this.option[objKey] = Object.assign(this.option[objKey], objVal)
      } else {
        this.option[objKey] = objVal
      }
      this.$set(this.option, objKey, this.option[objKey])
    },
  },
}
</script>

<style scoped>
.map-com {
  width: 100%;
  height: 760px;
  background-color: #fff;
  display: flex;
  position: relative;
  justify-content: center;
  align-items: center;
}
.return-btn {
  position: absolute;
  left: 30px;
  top: 30px;
  z-index: 20;
}
.o-echarts {
  width: 100%;
  height: 100%;
}
.tooltip-box {
  font-size: 12px;
  text-align: left;
  padding: 0;
  background: #2c3e5000;
}
.tooltip-box > p {
  padding: 0;
  margin: 0;
}
.flyline-box {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 99999;
}
</style>
